<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
      <el-form-item>
        <el-radio-group v-model="formItem.s_isRead" @change="search">
          <!-- <el-radio-button key="unRead" label="unRead">未读{{ unReadNumber }}条</el-radio-button> -->
          <el-radio-button key="unRead" label="unRead">未读</el-radio-button>
          <el-radio-button key="read" label="read">已读</el-radio-button>
          <el-radio-button key="all" label="">全部</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formItem.s_noticeType" class="select_input" clearable placeholder="请选择通知类别" @change="search">
          <el-option v-for="(item) in noticeType" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formItem.s_content"
          clearable
          placeholder="请输入内容..."
          size="mini"
          @keyup.enter.native="search"
          @change="onGlobeSearchInputChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-search" @click="search" />
        <!-- <el-button  plain size="mini" icon="el-icon-search" @click="search">查询</el-button>
        <el-button  plain size="mini" icon="el-icon-refresh-left" @click="reset">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { noticeType } from '@neu/biz-core/api/notice'
// 定义一个查询表单原始项
const formItem = {
  s_type: '',
  s_noticeType: '',
  s_isRead: 'unRead',
  s_content: ''
}

export default {
  name: 'DictionaryDescTableFilter',
  data() {
    return {
      formItem: {
        ...formItem
      },
      status: [{ value: 'read', label: '已读' }, { value: 'unRead', label: '未读' }, { value: '', label: '全部' }],
      noticeType: [
        // { value: 'basic', label: '基本通知' },
        // { value: 'maintenanceExpire', label: '维保到期' },
        // { value: 'assetExpire', label: '资产到期' },
        // { value: 'workOrder', label: '工单' },
        // { value: 'lifeCircle', label: '生命周期' },
        // { value: 'inventory', label: '库存提醒' },
        // { value: 'assetLend', label: '资产借出' }
      ]
    }
  },
  computed: {
    unReadNumber() {
      const notification = this.$store.getters.notifications.notification
      if (notification !== null) {
        this.search()
      }
      return this.$store.getters.notifications.number
    }
  },
  created() {
    noticeType().then(res => {
      this.noticeType = res.data
    })
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    },
    onChange: function(val) {
      this.$parent.onResize()
    },
    onGlobeSearchInputChange(value) {
      if (value === '') {
        this.search()
      }
    }
  }
}
</script>
